<template>
  <section class="setting-message-channel">
    <div class="content-channel">
      <div class="setting-title">
        <div>
          <p>{{$t('setting.messageChannel.settingTitle')}}</p>
          <p class="tip">{{$t('setting.messageChannel.tip.settingTip')}}</p> 
        </div>
        
        <el-button v-if="settingBtnShow" type="primary" @click="gotoMessageSetting">{{$t('setting.messageChannel.goToSetMessageNotice')}}</el-button>
      </div>

      <div class="setting-tab-content">
        <el-tabs v-model="activeTab" @tab-click="handleClick">
          <el-tab-pane :label="$t('common.base.sms')" name="sms">
            
            <message-sms 
              ref="smsRef" 
              :showWelfareBtn="smsShowWelfareBtn"
              @openWelFare="open"
              />
          </el-tab-pane>
          <el-tab-pane v-if="openWeixinSetting" :label="$t('common.base.publicGroupOfWechat')" name="wx">
            <message-wx />
          </el-tab-pane>
          <el-tab-pane v-if="openEmailCommon" :label="$t('common.base.email')" name="email">
            <message-email/>
          </el-tab-pane>
          <el-tab-pane v-if="callingMessage" :label="$t('setting.messageChannel.phoneMessage')" name="call">
            <message-phone  
              ref="callRef" 
              :showWelfareBtn="callShowWelfareBtn"
              :commodityCode="callingCommodityCode"
              @openWelFare="open"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
      
    </div>

    <DialogWelfare 
      v-model="welfareVisible"
      :isTenantFresh="isTenantFresh"
      :getParamWelfare="getParamWelfare"
      @getSuc="getSuc"
    >
    </DialogWelfare>
  </section>
</template>

<script>
import * as SettingApi from '@src/api/SettingApi';
import MessageSms from './components/message-sms.vue';
import MessageWx from './components/message-wx.vue';
import MessageEmail from './components/message-email.vue';
import MessagePhone from './components/message-phone.vue';

// dialog
import DialogWelfare from './components/dialog/dialogWelfare.vue';

import qs from 'src/util/querystring';
/* util */
import { getRootWindowInitData } from '@src/util/window'

import { openAccurateTab } from '@src/util/platform';

import { PageRoutesTypeEnum } from '@model/enum/PageRoutesEnum'

const rootWindowInitData = getRootWindowInitData()

export default {
  name: 'setting-message-channel',
  components: {
    MessageSms,
    MessageWx,
    MessageEmail,
    MessagePhone,
    DialogWelfare
  },
  data() {
    return {
      activeTab: 'sms',
      openWeixinSetting: rootWindowInitData.openWeixinSetting, // 是否显示公众号
      openEmailCommon:rootWindowInitData.openEmailCommon, //是否灰度
      callingMessage:rootWindowInitData.callingMessage, //是否灰度
      openPay:false,//是否打开充值弹框
      welfareVisible:false,//领取福利弹框

      addSmsCount:false,
      addCallCount:false,

      isTaken:true, //是否领取
      isTenantFresh:true, //否新租户
      didAlert:true,//是否发送过弹框

      settingBtnShow:false,
      getParamWelfare:{},

      callingCommodityCode:'call_time',
    }
  },

  computed:{
    smsShowWelfareBtn(){
      return !this.isTaken && this.isTenantFresh
    },

    callShowWelfareBtn(){
      return !this.isTaken
    }
  },

  mounted(){
    let query = qs.parse(window.location.search.substr(1));

    const { activeTab = 'sms', openPay } = query;
    openPay == 1 && ( this.openPay = true)

    if(!activeTab) return

    // 当邮件菜单灰度且地址栏传递的参数是activeTab === ‘email’，定位到邮件的tab上
    if(this.openEmailCommon && activeTab === 'email'){
      this.activeTab = 'email'
    }

    // 当电话菜单灰度且地址栏传递的参数是activeTab === ‘call’，定位到电话外呼的tab上
    if(this.callingMessage && activeTab === 'call'){
      this.activeTab = 'call'
    }

    this.getState()
  },

  methods: {
    // 渠道内获取套餐领取状态
    // /outside/activity/message/query
    async getState(){
      try{
        const param = {
          activityName:'smsAndCalling'
        }
        const { status, message, data = {} } = await SettingApi.messageQuery(param);

        // didAlert是否发送过弹框,isTaken是否领取,isTenantFresh否新租户
        const { isTaken, isTenantFresh, didAlert,commodityCode,packCode,specCode, callingCommodityCode} = data

        if(status !== 0) return

        this.isTaken = isTaken
        this.isTenantFresh = isTenantFresh
        this.didAlert = didAlert

        this.getParamWelfare = {
          activityName:'smsAndCalling',
          commodityCode,
          packCode,
          specCode
        }

        this.callingCommodityCode = callingCommodityCode
        
        // 新的需求：当没有领取过福利，就展示弹框
        // 1没有弹出过福利弹框，展示弹窗
        if(!this.isTaken){
          this.welfareVisible = true
          return
        }

        // 弹出过弹框且已经领取过，需要展示右上角的去设置消息通知的按钮
        this.isTaken && (this.settingBtnShow = true);
        
      }catch (error){
        console.log(error)
      }
    },

    open(){
      this.welfareVisible = true
    },

    handleClick(){

      if(this.activeTab === 'sms' && this.addSmsCount){
        this.$refs.smsRef?.addTotal()
        this.addSmsCount = false
      }

      if(this.activeTab === 'call' && this.addCallCount){
        this.$refs.callRef?.addTotal()
        this.addCallCount = false
      }
    },

    // 成功领取优惠后触发
    getSuc(){
      // 领取成功后，需要展示右上角的去设置消息通知的按钮
      this.settingBtnShow = true

      // 将已经领取的状态设为true
      this.isTaken = true
      // 新用户短信和电话都添加100，老用户电话添加100
      if(this.isTenantFresh){
        this.addSmsCount = true;
      }
      
      this.addCallCount = true;

      this.handleClick()
    },

    gotoMessageSetting(){
      openAccurateTab({
        type: PageRoutesTypeEnum.PageSettingMessage	
      })
    }
  },
}
</script>

<style lang="scss">
.setting-message-channel {
  padding:16px;
  height: 100%;
  overflow-y: auto;
  .content-channel{
    min-height:calc(100vh - 32px);
    background: #fff;
    padding: 12px 16px;
    border-radius: 4px;
  }
  .setting-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: $color-primary;
    // padding: 12px 16px;
    padding-bottom:12px;
    position: relative;
    &::before{
      display: block;
      position:absolute;
      content:'';
      height:1px;
      background: $color-border-l4;;
      left:-16px;
      bottom:0;
      right:-16px;
    }
    p {
      height: 22px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #262626;
      line-height: 22px;
      margin:0;
    }
    .tip {
      height: 20px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: $text-color-secondary;
      line-height: 20px;
      margin-top:4px;
    }
  }
  
  .el-tabs{
    margin-top:10px;
    .el-tabs__header{
      margin:0;
    }
    .el-tabs__nav{
      left:16px;
      .el-tabs__item{
        height:46px;
        line-height:46px;
      }
    }
  }
  
}
</style>